import React, { Component } from 'react'

/*
    因为 Footer 会被多个页面使用，所以 Footer 需要被单独定义，后期可以复用
*/

class Footer extends Component {
    render() {
        return (
            <>

                <footer style={{ backgroundColor: '#f66', height: 50 }}> 页脚部分 </footer>
            </>
        )
    }
}

function Page1() {
    return <>
        <h1>page1 页面</h1>
        <Footer />
    </>
}

function Page2() {
    return <>
        <h1>page2 页面</h1>
        <Footer />
    </>
}


export default class App extends Component {
    render() {
        return (
            <div>
                <Page1 />
                <hr />
                <Page2 />
            </div>
        )
    }
}
